<template>
  <el-dialog 
    v-model="state.show"
    width="500px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
    title="设备信息"
  >
    <el-descriptions :column="1" class="first-desc">
      <el-descriptions-item label="设备光照度值:">{{ state.lightValue }} lux</el-descriptions-item>
      <el-descriptions-item label="最近上报时间:">{{ parseTime(state.time, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { devicePropertyLogs } from '../api/devices.api'

const state = reactive({
  show: false,
  row: {} as any,
  historyTime: [new Date(new Date().getTime() - 24 * 3600 * 1000), new Date(new Date().getTime() + 24 * 3600 * 1000)],
  lightValue: '',
  time: ''
})

const openDialog = (currentDevice) => {
  state.show = true
  state.row = currentDevice

  var end = state.historyTime[1]
  var start = state.historyTime[0]
  devicePropertyLogs({
    deviceId: state.row.deviceId,
    name: 'light_value',
    start: start.getTime(),
    end: end.getTime(),
  })
    .then((res) => {
      if (res.data && res.data.length > 0) {
        state.lightValue = res.data[0].value
        state.time = res.data[0].time
      } else {
        state.lightValue = ''
        state.time = ''
      }
    })
}

defineExpose({
  openDialog,
})
</script>

<style lang="scss" scoped>
.first-desc :deep(.el-descriptions__body) {
  padding: 10px 10px 0 10px;
  background-color: #EFEFEF;
}
</style>